<template>
  <div class="channel">
	  <!--面包屑-->
		<div class="breadcrumb">
			<el-breadcrumb separator="/">
				<el-breadcrumb-item>首页</el-breadcrumb-item>
				<el-breadcrumb-item style="margin: 0 10px;">二级菜单</el-breadcrumb-item>
				<el-breadcrumb-item style="color: #20A0FF;">三级菜单</el-breadcrumb-item>
			</el-breadcrumb>
		</div>
		<!--主体内容1-->
		<div class="contentWrrapp">
            <div class="contentdiv">
			          <div class="contentleft">
			             <p>统计区间总收入</p>
			             <p>￥{{totalAmount+rechargeAmount}}
			             	<span @click="toDataList">详情统计</span>
			             </p>
			          </div>
			          <div class="contentright">
			           <el-radio-group v-model="labelNow" @change="labelClick">
								    <el-radio-button label="昨天"></el-radio-button>
								    <el-radio-button label="上周"></el-radio-button>
								    <el-radio-button label="上月"></el-radio-button>
								    <el-date-picker
									      v-model="dates"
									      align="right"
									      type="daterange"
									      placeholder="选择日期"
                        ref="picker"
									      :picker-options="pickerOptions1">
								    </el-date-picker>
                 </el-radio-group>
			          </div>
            </div>
          <div class="content">
            <div class="contentInfor">
            	<div>
            		<img src="./img/wechat.png"/>
            		<p><span>微信总收入</span><span>￥{{queryTotal.weixinAmount+queryRechargeTotal.weixinBalance}}</span></p>
            	</div>
            	<div>
            		<img src="./img/alipay.png"/>
            		<p><span>支付宝总收入</span><span>￥{{queryTotal.zfbAmount+queryRechargeTotal.zfbBalance}}</span></p>
            	</div>
            	<div>
            		<img src="./img/cash.png"/>
            		<p><span>现金总收入</span><span>￥{{queryTotal.pdaAmount}}</span></p>
            	</div>
            	<div>
            		<img src="./img/unionpay.png"/>
            		<p><span>银联总收入</span><span>￥{{queryTotal.tsftfAmount}}</span></p>
            	</div>
            	<div>
            		<img src="./img/card.png"/>
            		<p><span>一卡通总收入</span><span>￥{{queryTotal.onecardAmount}}</span></p>
            	</div>
            </div>
            <div class="charts1">
	            <div>
	              <ve-ring ref="left" :data="chart1Data" :settings="chartSettings" legend-position="bottom"></ve-ring>
	            </div>
              <div class="chart-title">
                <p>停车缴费总计</p>
                <h1>￥{{totalAmount}}</h1>
              </div>
            </div>
            
	            <div class="charts2">
	            	<div>
	              <ve-ring :data="chart2Data" :settings="chartSettings2"  legend-position="bottom"></ve-ring>
	              </div>
	            <div class="chart-title">
                <p>余额充值总计</p>
                <h1>￥{{rechargeAmount}}</h1>
              </div>
            </div>
       </div>
	    </div>
  </div>
</template>

<script>
  const queryTotal = '/orderStatics/queryTotal';
  const queryPayTotal = '/orderStatics/queryPayTotal';
  const queryRechargeTotal = '/orderStatics/queryRechargeTotal';
  // import echarts from 'echarts'
  import Mock from 'mockjs'
  Mock.mock(queryTotal, {
    code: '0000',
    msg: '提交成功',
    data: {
      totalAmount: 1,
      "pdaAmount|7000-20000": 1,
      "weixinAmount|7000-20000": 1,
      "zfbAmount|7000-20000": 1,
      "tsftfAmount|7000-20000": 1,
      "onecardAmount|7000-20000": 1
    }
  });
  // 1这个借口是用来干嘛的，数据是什么
  // 2关于总收入是否是我们前端动态相加{{queryTotal.weixinAmount+queryRechargeTotal.weixinBalance}}
  // 还是说这个借口就是已经相加好了
  Mock.mock(queryPayTotal, {
    code: '0000',
    msg: '提交成功',
    data: {
      payAmount: 1
    }
  });

  Mock.mock(queryRechargeTotal, {
    code: '0000',
    msg: '提交成功',
    data: {
      rechargeAmount: 1,
      "weixinBalance|1000-2000": 1,
      "zfbBalance|1000-2000": 1
    }
  });

  const fieldMap = {
    pdaAmount: '现金',
    weixinAmount: '微信',
    zfbAmount: '支付宝',
    tsftfAmount: '银联',
    onecardAmount: '一卡通'
  }

  const fieldMap2 = {
    weixinBalance: '微信',
    zfbBalance: '支付宝'
  }
  export default {
    data () {
      return {
        labelNow: 1,
        pickerOptions1: {
          shortcuts: [{
            text: '今天',
            onClick (picker) {
              picker.$emit('pick', [new Date(), new Date()]);
            }
          }, {
            text: '昨天',
            onClick (picker) {
              const date = new Date();
              date.setTime(date.getTime() - 3600 * 1000 * 24);
              picker.$emit('pick', [date, date]);
            }
          }, {
            text: '上周',
            onClick (picker) {
              const date = new Date();
              date.setTime(date.getTime() - 3600 * 1000 * 24 * 7);
              picker.$emit('pick', [date, new Date()]);
            }
          }],
           onPick: ({minDate, maxDate}) => {
            if (minDate && maxDate) {
              this.fetchData(minDate, maxDate);
              this.labelNow = '';
            }
          }
        },
        queryTotal: {},
        queryPayTotal: {},
        queryRechargeTotal: {},
        dates: [],
        title: {
          text: '总资产',
          subtext: '2000000.00',
          x: 'center',
          y: 'center',
          textStyle: {
            color: 'red'
          }
        },
        chartSettings: {
          dimension: '渠道',
          metrics: '收入',
          dataType: 'normal',
          selectedMode: 'single',
          hoverAnimation: false,
          radius: [100, 80],
          offsetY: 200,
          legend: {
            orient: 'horizontal',
            bottom: 0
          }
        },
        chartSettings2: {
          dimension: '余额',
          metrics: '充值',
          dataType: 'normal',
          selectedMode: 'single',
          hoverAnimation: false,
          radius: [100, 80],
          offsetY: 200
        }
      };
    },
    computed: {
      chart1Data () {
        return {
          columns: ['渠道', '收入'],
          rows: Object.keys(this.queryTotal).filter(o => !!fieldMap[o]).map(key => {
            return {
              '渠道': fieldMap[key],
              '收入': this.queryTotal[key]
            }
          })
        }
      },
      chart2Data () {
        return {
          columns: ['余额', '充值'],
          rows: Object.keys(this.queryRechargeTotal).filter(o => !!fieldMap2[o]).map(key => {
            return {
              '余额': fieldMap2[key],
              '充值': this.queryRechargeTotal[key]
            }
          })
        }
      },
      totalAmount () {
        return Object.keys(this.queryTotal).filter(o => !!fieldMap[o]).reduce((last, key) => last + this.queryTotal[key], 0)
      },
      rechargeAmount () {
        return Object.keys(this.queryRechargeTotal).filter(o => !!fieldMap2[o]).reduce((last, key) => last + this.queryRechargeTotal[key], 0)
      }
    },
    methods: {
    	toDataList () {
        console.log(2222)
        this.$router.push({path: 'dataList'});
        let dataList = this.queryTotal;
        dataList = JSON.stringify(dataList);
        window.localStorage.setItem('dataList', dataList);
      },
      date2Str (dt) {
        if (!dt) {
          return '';
        }
        return dt.getFullYear() + '-' + (dt.getMonth() + 1) + '-' + dt.getDate();
      },
      fetchData (dateBegin, dateEnd) {
        // console.log(dateBegin.toLocaleDateString())
        // console.log(dateEnd.toLocaleDateString())
        return this.$axios.all([
        // 请求queryTotal数据，将数据赋值给Vue的originData
          this.$axios.post(queryTotal, {
            params: {
              token: sessionStorage.token,
              startTime: this.date2Str(dateBegin),
              endTime: this.date2Str(dateEnd)
            }
          }),
        // 请求queryTotal数据，将数据赋值给Vue的originData
          this.$axios.post(queryPayTotal, {
            params: {
              token: sessionStorage.token,
              startTime: this.date2Str(dateBegin),
              endTime: this.date2Str(dateEnd)
            }
          }),
        // 请求queryRechargeTotal数据，将数据赋值给Vue的queryRechargeTotal
          this.$axios.post(queryRechargeTotal, {
            params: {
              token: sessionStorage.token,
              startTime: this.date2Str(dateBegin),
              endTime: this.date2Str(dateEnd)
            }
          })
        ]).then(res => {
          this.queryTotal = res[0].data.data;
          this.queryPayTotal = res[1].data.data;
          this.queryRechargeTotal = res[2].data.data;
        });
      },
      labelClick (v) {
        // console.log(2222)
        let dt = new Date();
        let year = dt.getFullYear();
        let month = dt.getMonth();
        switch (v) {
          case '昨天':
            dt.setTime(dt.getTime() - 24 * 60 * 60 * 1000);
            this.dates = [dt, dt];
            this.fetchData(dt, dt);
            break;
          case '上周':
            let endOfWeek = new Date(new Date(year, month, dt.getDate() - dt.getDay()))
            this.dates = [new Date(endOfWeek - 6 * 24 * 60 * 60 * 1000), endOfWeek];
            this.fetchData(this.dates[0], this.dates[1]);
            break;
          case '上月':
            dt.setMonth(month - 1);
            month = dt.getMonth();
            this.dates = [new Date(year, month, 1), new Date(year, month + 1, 0)];
            this.fetchData(this.dates[0], this.dates[1]);
            break;
        }
      }
    },
    created () {
      this.fetchData(new Date(), new Date());
    }
  };
</script>
<style scoped lang="less" rel="stylesheet/less">
.aa{
	background: #FFFFFF;
}
.content{
	border: 1px solid #ccc;
	border-radius: 6px;
	width: 1192px;
	height: 500px;
}
.charts1,.charts2{
	float: left;
	width: 50%;
	height: auto;
  position: relative;
  .chart-title{
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
    p{
    	margin-bottom: 20px;
    	color: #999;
    }
    h1{
    	margin-bottom: 20px;
    	font-size: 23px;
    }
  }
}
 .contentInfor {
      height: 90px;
      display: flex;
      box-sizing: border-box;
    div{
      margin-left:24px;
      display: flex;
      justify-content: space-between;
      align-items: center;
      width: 206px;
      height: 82px;
      padding: 0 20px;
      margin-top:20px;
        img{
            margin-left:13px;
            display: inline-block;
        }
        p{
            margin-right: 37px;
            display: flex;
            flex-direction: column;
            span:nth-child(1){
                color: #999;
                display: inline-block;
                margin-bottom: 9px;
            }
            span{
                display: block;
            }

        }
    }

}
 .contentdiv{
      width: 1192px;
      height: 176px;
      background: #EFF2F7;
      margin-top: 37px;
      margin-bottom: 9px;
      display: flex;
      justify-content: space-between;
      .contentleft{
          p:nth-child(1){
            font-size: 16px;
            border-left: 4px solid #0099FA;
            margin: 20px 20px;
            padding-left: 18px;

          }
          p:nth-child(2){
            font-size: 67px;
            color:#0099FA;
            margin-left:35px;
            span{
              font-family: MicrosoftYaHei;
							font-size: 14px;
							color: #0099FA;
							margin-left:20px;
              cursor: pointer;
            }
          }
     }
     .contentright{
            margin-top:70px;
            margin-right:34px;
            input{
             width: 153px;
             height:32px;
             background: #FFFFFF;
						 border: 1px solid #C0CCDA;
						 margin-left:24px;
						 padding-left: 10px;
						 border-radius: 4px;
            }
     }

 }

</style>
